<template>
  <div class="planDetails">
    <div>
      <el-button size="mini" @click="planTionDetails">{{ $t('btn.reload') }}</el-button>
      <el-button type="primary" size="mini" @click="editLx">{{ $t('btn.save') }}</el-button>
    </div>
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane :label="$t('menu.planDetails')" name="basic">
        <jc-form
          :options="options"
          :option-value="optionValue"
        />
        <div style="margin-top: 10px;">
          <jc-table
            :table-data="tableData"
            :table-header="tableHeader"
            :table-height="tableHeight"
            serial
          >
            <!--物料编码-->
            <template v-slot:text2Slot="col">
              <el-link type="primary" @click="sonJumpMateriel(col.scope.row.fnumber)">
                {{ col.scope.row.fnumber }}
              </el-link>
            </template>
          </jc-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import jcForm from '@/components/Form'
import {
  queryRequistionDetails, updatePlnPlanorder
} from '@/api/production/productionList'
import { queryOrgList } from '@/api/minix'
import jumpMateriel from '@/components/JumpMateriel'
export default {
  components: {
    jcForm
  },
  mixins: [jumpMateriel],
  data() {
    return {
      activeName: 'basic',
      options: {},
      optionValue: {},
      teamList: [],
      tableData: [],
      tableHeader: [
        { label: this.$t('market.subitemNum'), type: 'text2', prop: 'fnumber' },
        { label: this.$t('market.subitemName'), prop: 'fname' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.specify'), prop: 'fspecificaTion', minWidth: '100' },
        { label: this.$t('market.issueType'), prop: 'fissuetypename' },
        { label: this.$t('market.demandDate'), prop: 'fdemandDate' },
        { label: this.$t('market.subitemNnit'), prop: 'funit', width: '90' },
        { label: this.$t('market.bomNum'), prop: 'fnumerator', width: '90' },
        { label: this.$t('market.stdqty'), prop: 'fstdqty', width: '90' },
        { label: this.$t('market.needqty'), prop: 'fneedqty', width: '90' },
        { label: this.$t('market.mustqty'), prop: 'fmustqty', width: '90' },
        { label: this.$t('market.branches2'), prop: 'fbranches', width: '90' }
      ],
      tableHeight: '60vh'
    }
  },
  watch: {
    'optionValue.fstockorgid': {
      handler(val) {
        this.optionValue.fownerid = val
      }
    }
  },
  created() {
    this.planTionDetails()
    this.getForm()
    // this.queryOrgit()
  },
  methods: {
    // 销售组织
    queryOrgit() {
      queryOrgList({}).then(res => {
        this.teamList = res.data.list
        this.teamList.map(item => {
          item.label = item.fname
          item.value = item.fid
        })
        this.getForm()
      })
    },
    getForm() {
      this.options = {
        freleasetype: { label: this.$t('market.billType'), disabled: true },
        fbillno: { label: this.$t('market.billNo'), disabled: true },
        fmodel: { label: this.$t('market.fmodel'), disabled: true },
        fnumber: { label: this.$t('market.fmaterial'), disabled: true },
        fname: { label: this.$t('shop.fname2'), disabled: true },
        fspecificaTion: { label: this.$t('market.specify'), disabled: true },
        funit: { label: this.$t('market.funit'), disabled: true },
        fsaleorderno: { label: this.$t('market.saleorderno'), disabled: true },
        fsaleorderentryseq: { label: this.$t('market.saleorderentryseq'), disabled: true },
        fproductmodel: { label: this.$t('market.productmodel'), disabled: true },
        fPaezText: { label: this.$t('market.paezText1'), disabled: true },
        fprddept: { label: this.$t('market.workshop'), disabled: true },
        fplanstartdate: { label: this.$t('market.purchProdate'), disabled: true },
        fplanfinishdate: { label: this.$t('market.aogfinishdate'), disabled: true }
        // fsupplyorgid: { label: '采购/生产组织', type: 'select', selectItems: this.teamList },
        // fsettleorgid: { label: '结算组织', type: 'select', selectItems: this.teamList },
        // fstockorgid: { label: '入库组织', type: 'select', selectItems: this.teamList },
        // fownerid: { label: '货主', type: 'select', selectItems: this.teamList, disabled: true }
      }
    },
    // 详情
    planTionDetails() {
      const DATA = {
        fid: this.$route.params.id
      }
      queryRequistionDetails(DATA).then(res => {
        if (res.code === 0) {
          this.optionValue = res.data
          this.tableData = res.data.details
        }
      })
    },
    // 修改
    editLx() {
      const DATA = {
        ...this.optionValue
      }
      updatePlnPlanorder(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
          this.planTionDetails()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.planDetails {
  @include listBom;
}
</style>
